import * as echarts from 'echarts'

export const realTimeLineData = (data) => {
  console.log(data, 'data......')
  let xdata = data.heartbeatTime.map((item) => {
    return item.substring(5)
  })
  let { thickSmoke, particleHaze, nonMethane } = data
  let option = {
    //图例
    legend: {
      itemWidth: 14,
      itemHeight: 10,
      itemGap: 10,
      data: [
        { name: '油烟数值', textStyle: { color: '#00F8FF' } },
        { name: '颗粒物浓度', textStyle: { color: '#EFD635' } },
        { name: '非甲烷总烃', textStyle: { color: '#00FE9F' } },
      ],
      //right: 'center',
      right: 'center',
      top: '3%',
      textStyle: { fontSize: 14 },
    },
    grid: {
      left: '',
      right: '0',
      bottom: '15%',
      //刻度标签
      containLabel: true,
    },
    //区域缩放组件
    dataZoom: [
      {
        show: true,
        height: 30,
        xAxisIndex: 0,
        bottom: 10,
        right: '1%',
        start: 99,
        end: 100,
        minSpan: 3,
        maxSpan: 10,
        handleSize: '110%',
        realtime: true,
        handleStyle: {
          color: '#d3dee5',
        },
        textStyle: {
          color: '#fff',
        },
        borderColor: '#90979c',
      },
      {
        type: 'inside',
        show: true,
        height: 15,
        start: 99,
        end: 100,
      },
    ],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        axisLine: {
          lineStyle: {
            color: '#02C1C7',
          },
        },
        axisLabel: {
          // interval: 1,
          // rotate: 45,
          margin: 10,
          padding: [0, 0, 0, 0],
          color: '#02C1C7',
          textStyle: {
            fontSize: '.12rem',
          },
        },
        data: xdata,
      },
    ],
    yAxis: [
      {
        type: 'value',
        name: '浓度(mg/m³)',
        nameTextStyle: {
          padding: [0, 0, 10, 35],
          fontSize: 14,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            color: '#02C1C7',
          },
        },
        axisLabel: {
          margin: 10,
          textStyle: {
            fontSize: 16,
          },
        },
        splitLine: {
          lineStyle: {
            color: '#036265',
          },
        },
      },
    ],
    series: [
      {
        name: '油烟数值',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
          normal: {
            width: 1,
          },
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: 'rgba(0, 248, 255, 0.6)',
                },
                {
                  offset: 0.8,
                  color: 'rgba(0, 248, 255, 0.1)',
                },
              ],
              false,
            ),
            shadowColor: 'rgba(0, 0, 0, 0.1)',
            shadowBlur: 10,
          },
        },
        itemStyle: {
          normal: {
            color: 'rgb(0, 248, 255)',
            borderColor: 'rgba(0, 248, 255,1)',
            borderWidth: 12,
          },
        },
        data: thickSmoke,
      },
      {
        name: '颗粒物浓度',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
          normal: {
            width: 1,
          },
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: 'rgba(239, 214, 53,.6)',
                },
                {
                  offset: 0.8,
                  color: 'rgba(239, 214, 53,.1)',
                },
              ],
              false,
            ),
            shadowColor: 'rgba(0, 0, 0, 0.1)',
            shadowBlur: 10,
          },
        },
        itemStyle: {
          normal: {
            color: 'rgb(239, 214, 53)',
            borderColor: 'rgba(239, 214, 53,.6)',
            borderWidth: 12,
          },
        },
        data: particleHaze,
      },
      {
        name: '非甲烷总烃',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
          normal: {
            width: 1,
          },
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: 'rgba(0, 254, 159,0.6)',
                },
                {
                  offset: 0.8,
                  color: 'rgba(0, 254, 159,0.1)',
                },
              ],
              false,
            ),
            shadowColor: 'rgba(0, 0, 0, 0.1)',
            shadowBlur: 10,
          },
        },
        itemStyle: {
          normal: {
            color: 'rgb(0, 254, 159)',
            borderColor: 'rgba(0, 254, 159,0.6)',
            borderWidth: 12,
          },
        },
        data: nonMethane,
      },
    ],
  }

  return option
}

export const historyTimeData = (data) => {
  let xdata = data.heartbeatTime.map((item) => {
    return item.substring(5)
  })
  let { thickSmoke, particleHaze, nonMethane } = data
  let option = {
    legend: {
      itemWidth: 14,
      itemHeight: 10,
      itemGap: 10,
      data: [
        { name: '油烟数值', textStyle: { color: '#00F8FF' } },
        { name: '颗粒物浓度', textStyle: { color: '#EFD635' } },
        { name: '非甲烷总烃', textStyle: { color: '#00FE9F' } },
      ],
      right: 'center',
      top: '3%',
      textStyle: { fontSize: 14 },
    },
    grid: {
      left: '',
      right: '0',
      bottom: '15%',
      containLabel: true,
    },
    dataZoom: [
      {
        show: true,
        height: 30,
        xAxisIndex: 0,
        bottom: 10,
        right: '1%',
        start: 1,
        end: 35,
        minSpan: 3,
        // maxSpan: 20,
        handleSize: '110%',
        handleStyle: {
          color: '#d3dee5',
        },
        textStyle: {
          color: '#fff',
        },
        borderColor: '#90979c',
      },
      {
        type: 'inside',
        show: true,
        height: 15,
        start: 1,
        end: 35,
      },
    ],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        axisLine: {
          lineStyle: {
            color: '#02C1C7',
          },
        },
        axisLabel: {
          // interval: 0,
          // rotate: 45,
          margin: 10,
          padding: [0, 0, 0, 0],
          color: '#02C1C7',
          textStyle: {
            fontSize: '.12rem',
          },
        },
        data: xdata,
      },
    ],
    yAxis: [
      {
        type: 'value',
        name: '浓度(mg/m³)',
        nameTextStyle: {
          padding: [0, 0, 10, 35],
          fontSize: 14,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            color: '#02C1C7',
          },
        },
        axisLabel: {
          margin: 10,
          textStyle: {
            fontSize: 16,
          },
        },
        splitLine: {
          lineStyle: {
            color: '#036265',
          },
        },
      },
    ],
    series: [
      {
        name: '油烟数值',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
          normal: {
            width: 1,
          },
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: 'rgba(0, 248, 255, 0.6)',
                },
                {
                  offset: 0.8,
                  color: 'rgba(0, 248, 255, 0.1)',
                },
              ],
              false,
            ),
            shadowColor: 'rgba(0, 0, 0, 0.1)',
            shadowBlur: 10,
          },
        },
        itemStyle: {
          normal: {
            color: 'rgb(0, 248, 255)',
            borderColor: 'rgba(0, 248, 255,1)',
            borderWidth: 12,
          },
        },
        data: thickSmoke,
      },
      {
        name: '颗粒物浓度',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
          normal: {
            width: 1,
          },
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: 'rgba(239, 214, 53,.6)',
                },
                {
                  offset: 0.8,
                  color: 'rgba(239, 214, 53,.1)',
                },
              ],
              false,
            ),
            shadowColor: 'rgba(0, 0, 0, 0.1)',
            shadowBlur: 10,
          },
        },
        itemStyle: {
          normal: {
            color: 'rgb(239, 214, 53)',
            borderColor: 'rgba(239, 214, 53,.6)',
            borderWidth: 12,
          },
        },
        data: particleHaze,
      },
      {
        name: '非甲烷总烃',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
          normal: {
            width: 1,
          },
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: 'rgba(0, 254, 159,0.6)',
                },
                {
                  offset: 0.8,
                  color: 'rgba(0, 254, 159,0.1)',
                },
              ],
              false,
            ),
            shadowColor: 'rgba(0, 0, 0, 0.1)',
            shadowBlur: 10,
          },
        },
        itemStyle: {
          normal: {
            color: 'rgb(0, 254, 159)',
            borderColor: 'rgba(0, 254, 159,0.6)',
            borderWidth: 12,
          },
        },
        data: nonMethane,
      },
    ],
  }

  return option
}
